<template>
  <div id="order-list">
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <div v-for="(item,index) in orderArr" :key="index">
          <van-cell center title="订单号" :label="item.order_sn" >
            <template>
              <p style="color:red" v-if="item.pay_status==0&&item.order_status==0">待付款</p>
              <p style="color:red" v-if="item.pay_status==1&&item.shipping_status==0">待发货</p>
              <p style="color:red" v-if="item.pay_status==1&&item.shipping_status==1">待收货</p>
              <p style="color:red" v-if="item.order_status==1">已完成</p>
              <p style="color:red" v-if="item.order_status==-1">已取消</p>
            </template>
          </van-cell>
          <van-card
            :num="item1.number"
            :price="item1.retail_price"
            :title="item1.goods_name"
            :thumb="item1.list_pic_url"
            v-for="(item1,index1) in item.orderGoods" :key="index1"
          />
          <div style="text-align: right;">
            <p>共{{item.orderGoods.length}}件商品 合计：￥{{item.actual_price}}</p>
            <van-button @click="onClickPay(item.id)" type="primary" v-if="item.pay_status==0&&item.order_status==0">去支付</van-button>
          </div>
          <van-divider />
        </div>
      </van-list>
    </van-pull-refresh>
    
  </div>
</template>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
  #order-list{
    width: 100%;
    height: 100%;
  }
</style>

<script lang="ts">
// @ is an alias to /src
import { 
  Image as VanImage,PullRefresh,List,Card,Tab,Tabs,Cell,Button,Divider
} from 'vant';
import { Component, Prop, Vue, Watch, Model } from 'vue-property-decorator';
import router from '../router';
import store from '../store/index';
import orderApi from '../api/order.api';
import payApi from '../api/pay.api';

Vue.use(VanImage).use(PullRefresh).use(List).use(Card).use(Tab).use(Tabs).use(Cell).use(Button).use(Divider);
@Component
export default class OrderListComponent extends Vue {
  private orderData: any={};
  private orderArr: any[]=[];
  private finished: boolean=false;
  private loading: boolean=false;
  private refreshing: boolean=false;
  
  async created(){
    store.commit('global/setShowPageLoading',true);
    this.orderData=await orderApi.getOrders({
      join:['orderGoods']
    });
    this.orderArr=this.orderData.data;
    store.commit('global/setShowPageLoading',false);
  }

  private async onRefresh(){
    // 清空列表数据
    this.finished = false;
    this.loading=true;
    this.orderData=await orderApi.getOrders({
      join:['orderGoods']
    });
    this.orderArr=this.orderData.data;
    this.loading=false;
  }

  private async onLoad(){
    const p=this.orderData.page+1;
    if(p>this.orderData.pageCount){
      this.finished=true;
      return;
    }
    this.loading=true;
    this.orderData=await orderApi.getOrders({
      join:['orderGoods'],
      page: p
    });
    this.orderArr=this.orderArr.concat(this.orderData.data);
    this.loading=false;
  }

  private async onClickPay(id){
    const res=await payApi.alipay(id);
    router.currentRoute.meta.navTitle="支付";
    //console.log(res);
    router.push({
      path:'/frame',
      query:{
        frame_src:res.data.url
      }
    });
  }
}
</script>
